<!-- top navbar with question title -->
<nav class="navbar navbar-default navbar-fixed-top" av-affix-top=".navbar-unfixed-top" role="navigation">
  <div class="container">
    <div class="row avb-top-navbar">
      <div class="pull-left"
        ng-i18next="[html:i18next]({sprintf:['1','3']})avBooth.stepNumber">
      </div>
      <div class="pull-right">
        <span
          class="glyphicon glyphicon-question-sign"
          ng-click="launchHelp()">
        </span>
        <span ng-click="launchHelp()" ng-i18next="avBooth.helpTitle"></span>
        <span class="dropdown left-padding" av-change-lang>
      </div>
    </div>

  </div>
</nav>

<div class="wrapper-unfixed">
  <div class="navbar-unfixed-top text-center">
    <div class="container">
      <div class="hidden unfixed-top-height"></div>
      <h1>{{election.title}}</h1>
    </div>
  </div>
</div>

  <div class="content avb-content">
    <div class="container">
    <div
      class="row"
      av-affix-top-offset="45">
      <div
        class="hidden-xs col-sm-4 small-selected"
        ng-class="{dropdown: stateData.selectionDropDown}">
        <div
          class="pull-left"
          ng-click="stateData.selectionDropDown = !stateData.selectionDropDown">
          <h4 ng-i18next="[i18next]({count: numSelectedOptions()})avBooth.numSelectedOptionsSmall"></h4>
          <span
            class="glyphicon glyphicon-play avb-toggle-span">
          </span>
        </div>
      </div>
      <div
        class="col-xs-12 col-sm-4 filter-input-wrap"
        ng-class="{wrapDropdown: stateData.selectionDropDown}">
        <div
          class="filter-input"
          ng-if="!stateData.selectionDropDown">
          <span class="glyphicon glyphicon-search"></span>
          <input type="text"
            id="filter-input"
            ng-model="stateData.filter"
            av-debounce="500"
            ng-i18next="[placeholder]avBooth.filterOptionsPlaceholder2"
            />
        </div>
        <div
          class="visible-xs hidder"
          ng-if="stateData.selectionDropDown">
        </div>
      </div>
      <div
        class="visible-xs col-xs-12 small-selected padded"
        ng-class="{dropdown: stateData.selectionDropDown}">
        <div
          class="pull-left"
          ng-click="stateData.selectionDropDown = !stateData.selectionDropDown">
          <h4 ng-i18next="[i18next]({count: numSelectedOptions()})avBooth.numSelectedOptionsSmall"></h4>
          <span
            class="glyphicon glyphicon-play avb-toggle-span">
          </span>
        </div>
      </div>

      <div
        class="clearfix"
        ng-class="{titleSelected: stateData.selectionDropDown}">
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6 hidden-xs options-title"
        ng-class="{titleSelected: stateData.selectionDropDown}">
        <span ng-i18next="avBooth.candidatesTitle"></span>
        <div class="title-help important" ng-i18next="avBooth.helpTextViewSingleCandidates"></div>
        <div class="title-help" ng-i18next="avBooth.helpTextViewCell"></div>
      </div>
      <div class="hidden-xs col-xs-{{6 / groupQuestions.length}} affix-docs-header"
        ng-class="{titleSelected: stateData.selectionDropDown}"
        ng-repeat="question in groupQuestions">
        {{question.title}}
        <!--<div
          class="title-help"
          ng-i18next="[i18next]({selected: numSelectedByQuestionIndex($index), count: numTotalByQuestionIndex($index)})avBooth.totalsQuestionColumn">
        </div>-->
        <div
          class="randomize-column"
          ng-class="{hidden: stateData.selectionDropDown}"
          ng-click="randomizeByColumn($index)">
           <span class="glyphicon glyphicon-sort-by-attributes"></span>
           <span ng-i18next="avBooth.randomizeColumn"></span>
        </div>
      </div>

      <div
        class="clearfix"
        ng-class="{titleSelected: stateData.selectionDropDown}">
      </div>
    </div>

    <!-- show available options and filter -->
    <div class="col-xs-12 pcandidates-list"
      ng-class="{hidden: stateData.selectionDropDown}">
      <div avb-pcandidates-rows>
      </div>
    </div>

    <!-- show selected options -->
    <div
      class="col-xs-12 affixedSelection"
      ng-class="{hidden: !stateData.selectionDropDown}">
      <div avb-pcandidates-row
        ng-repeat="team in groupedOptions | avbSelectedOptions"
        class="animate-repeat selected">
      </div>
      <div
        class="padded"
        ng-if="(groupedOptions | avbSelectedOptions).length == 0"
        ng-i18next="avBooth.noOptionsSelected">
      </div>
    </div>

    <!-- next button -->
    <div class="row affix-bottom text-center">
      <p class="warnings">
        <span
          class="text-brand-warning"
          id="maxSelectedLimitReached"
          ng-i18next="[i18next]({max: election.max})avBooth.maxSelectedLimitReached"
          ng-if="shownWarning === warningEnum.maxSelectedLimitReached">
        </span>
        <span
          class="text-brand-warning"
          id="cannotSelectAll"
          ng-i18next="[i18next]({max: election.max})avBooth.cannotSelectAll"
          ng-if="shownWarning === warningEnum.cannotSelectAll">
        </span>
      </p>
      <button
        class="btn btn-block btn-lg btn-success btn-plain"
        ng-click="showNext()">
        {{nextButtonText}}
      </button>
    </div>
  </div>
</div>